<script setup lang="ts">
import { onMounted } from 'vue'

onMounted(function() {
  let sidebarArrow = document.querySelectorAll('.arrow')
  for (var i = 0; i < sidebarArrow.length; i++) {
    sidebarArrow[i].addEventListener('click', (e) => {
      let arrowParent = e.target.parentElement.parentElement
      arrowParent.classList.toggle('showMenu')
    })
  }
})

</script>

<template>
  <li>
    <div class="iocn-link">
      <a href="#">
        <i class='bx bxl-steam'></i>
        <span class="link_name">游戏</span>
      </a>
      <i class='bx bxs-chevron-down arrow'></i>
    </div>
    <ul class="sub-menu">
      <li><a class="link_name" href="#">Category</a></li>
      <li><a href="#">Left 4 Dead 2</a></li>
      <li><a href="#">Don't Starve</a></li>
    </ul>
  </li>
</template>

<style lang="scss">
.sidebar .nav-links li .iocn-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sidebar.close .nav-links li .iocn-link {
  display: block
}
.sidebar.close .nav-links li:hover .sub-menu {
  top: 0;
  opacity: 1;
  pointer-events: auto;
  transition: all 0.4s ease;
}

.sidebar .nav-links li .sub-menu .link_name {
  display: none;
}

.sidebar.close .nav-links li .sub-menu .link_name {
  font-size: 18px;
  opacity: 1;
  display: block;
}

.sidebar .nav-links li .sub-menu.blank {
  opacity: 1;
  pointer-events: auto;
  padding: 3px 20px 6px 16px;
  opacity: 0;
  pointer-events: none;
}

.sidebar .nav-links li:hover .sub-menu.blank {
  top: 50%;
  transform: translateY(-50%);
}

</style>